// src\views\sendbox\right-manage\RoleList.jsx
// 角色列表
import React, { useEffect, useState } from 'react'
import { Table, Button, Space, Modal, message, Tree } from 'antd'
import axios from 'axios';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
export default function RoleList() {
  // 控制render刷新
  const [isRefresh, setIsRefresh] = useState(false);
  const [dataSource, setdataSource] = useState([]);
  // 树数据
  const [treeRightData, setTreeRightData] = useState([]);
  // 修改模态框的显示与隐藏
  const [isModalOpen, setisModalOpen] = useState(false);
  // 当前操作的对象
  const [currItem,setCurrItem]=useState({});
  useEffect(() => {
    axios.get("http://localhost:8888/roles").then(res => {
      setdataSource(res.data);
    })
  }, [isRefresh]);
  useEffect(() => {
    axios.get('http://localhost:8888/rights?_embed=children').then(res => {
      setTreeRightData(res.data);
    })
  }, [])
  const [open, setOpen] = useState(false);
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_, item) => {
        return (
          <Space>
            <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} size="small" onClick={() => deleteRole(item)} />
            <Button type="primary" shape="circle" icon={<EditOutlined />} size="small" onClick={() => editRolePermiss(item)} />
          </Space>
        )
      }
    },
  ];
  // 默认勾选
  const [currCheckList, setCurrCheckList] = useState([]);
  const onCheck = (checkedKeys) => {
    setCurrCheckList(checkedKeys);
  };
  // 删除
  const deleteRole = (item) => {
    setCurrItem(item);
    setOpen(true);
  };
  // 删除框关闭
  const handleCancel = () => {
    setOpen(false);
  };
  // 删除框确定
  const handleOk = () => {
    axios.delete(`http://localhost:8888/roles/${currItem.id}`).then(res => {
      if (res.status === 200) {
        message.success("删除成功")
      } else {
        message.warning("删除失败")
      }
    });
    setOpen(false);
    setIsRefresh(!isRefresh);
  };
  // 修改
  const editRolePermiss = (item) => {
    setCurrCheckList(item.rights);
    setCurrItem(item);
    setisModalOpen(true);
  }
  // 修改框关闭
  const handleEditCancel = () => {
    setisModalOpen(false);
  }
  // 修改框确定
  const handleEditOk = () => {
    axios.patch(`http://localhost:8888/roles/${currItem.id}`,{
      rights:currCheckList
    })
    setisModalOpen(false)
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey="id"/>
      {/* 删除模态框 */}
      <Modal
        title="删除"
        open={open}
        onOk={handleOk}
        okText="确定"
        onCancel={handleCancel}
        cancelText="取消"
      >
        <p>
          确认删除？
        </p>
      </Modal>
      {/* 修改模态框 */}
      <Modal title="角色权限树" okText="确定" cancelText="取消" open={isModalOpen} onOk={handleEditOk} onCancel={handleEditCancel}  >
        <Tree
          checkable
          checkedKeys={currCheckList}
          onCheck={onCheck}
          treeData={treeRightData}
        />
      </Modal>
    </div>
  )
}
